<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2025/7/13
  Time: 19:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>商场消防云平台 - 系统设置</title>
    <script src="js/jquery-3.7.1.js"></script>
    <style>
        /* 复用火灾报警系统的样式 */
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
        }
        .header {
            background-color: #409EFF;
            color: white;
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .nav {
            background-color: #333;
            overflow: hidden;
            display: flex;
        }
        .nav a {
            color: white;
            padding: 14px 16px;
            text-decoration: none;
            font-size: 17px;
        }
        .nav a:hover {
            background-color: #ddd;
            color: black;
        }
        .nav a.active {
            background-color: #f44336;
            color: white;
        }
        .container {
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }
        .setting-section {
            background-color: white;
            box-shadow: 0 0 5px rgba(0,0,0,0.1);
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
        }
        .setting-section h3 {
            margin-top: 0;
            margin-bottom: 15px;
            font-size: 18px;
            border-left: 5px solid #409EFF;
            padding-left: 10px;
        }
        .setting-form {
            margin: 20px 0;
        }
        .form-group {
            margin-bottom: 20px;
        }
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
        }
        .form-group input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        .btn-save {
            padding: 10px 20px;
            background-color: #409EFF;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        .btn-save:hover {
            background-color: #3a8ee6;
        }
        .param-table {
            width: 100%;
            border-collapse: collapse;
        }
        .param-table th, .param-table td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
        }
        .param-table th {
            background-color: #f2f2f2;
        }
        .param-table input {
            width: 80px;
            padding: 6px;
            text-align: center;
        }
        .save-status {
            margin-top: 15px;
            padding: 10px;
            border-radius: 4px;
            display: none;
        }
        .save-success {
            background-color: #d4edda;
            color: #155724;
        }
        .save-fail {
            background-color: #f8d7da;
            color: #721c24;
        }
    </style>
</head>
<body>
<div class="header">
    <h1>商场消防云平台</h1>
    <div>
        <a href="LogoutServlet">退出登录</a>
    </div>
</div>

<div class="nav">
    <a href="main.jsp">首页</a>
    <a href="fire_alarm_list.jsp">火灾报警系统</a>
    <a href="equipment_management.jsp">消防设备管理系统</a>
    <a href="inspection_system.jsp" >设备巡检系统</a>
    <a href="video_monitoring.jsp">视频监控系统</a>
    <a href="emergency_plan.jsp">应急预案管理</a>
    <a href="duty_staff.jsp">检查人员管理</a>
    <a href="system.jsp" class="active">系统设置</a>
    <a href="change_password.jsp">修改密码</a>
</div>

<div class="container">
    <h2>系统设置</h2>

    <div class="setting-section">
        <h3>阈值配置</h3>
        <p>设置环境参数的预警阈值，当实际监测值超过阈值时系统将自动触发报警。</p>

        <div class="save-status" id="saveStatus"></div>

        <form id="thresholdForm">
            <table class="param-table">
                <thead>
                <tr>
                    <th>参数类型</th>
                    <th>当前阈值</th>
                    <th>单位</th>
                    <th>新阈值设置</th>
                </tr>
                </thead>
                <tbody id="thresholdTable">
                <!-- 通过AJAX加载阈值数据 -->
                </tbody>
            </table>

            <div style="text-align: right; margin-top: 20px;">
                <button type="button" class="btn-save" onclick="saveThresholds()">保存设置</button>
            </div>
        </form>
    </div>
</div>

<script>
    // 页面加载时获取当前阈值配置
    $(document).ready(function() {
        loadThresholds();
    });

    // 加载阈值配置
    function loadThresholds() {
        $.get("ThresholdConfigServlet", function(data) {
            if (typeof data === "string") {
                data = JSON.parse(data);
            }

            var tbody = $("#thresholdTable");
            tbody.empty();

            data.forEach(function(config) {
                tbody.append(
                    "<tr>" +
                    "<td>" + config.paramType + "</td>" +
                    "<td><span id='current_" + config.paramType + "'>" + config.thresholdValue + "</span></td>" +
                    "<td>" + config.unit + "</td>" +
                    "<td><input type='number' step='0.1' id='threshold_" + config.paramType +
                    "' value='" + config.thresholdValue + "' required></td>" +
                    "</tr>"
                );
            });
        }).fail(function() {
            alert("加载阈值配置失败，请刷新页面重试");
        });
    }

    // 保存阈值配置
    function saveThresholds() {
        var params = ["温度", "湿度", "烟雾浓度"];
        var updates = [];

        params.forEach(function(param) {
            var threshold = $("#threshold_" + param).val();
            updates.push({
                paramType: param,
                thresholdValue: threshold
            });
        });

        $.ajax({
            url: "ThresholdConfigServlet",
            method: "POST",
            contentType: "application/json",
            data: JSON.stringify(updates),
            success: function(res) {
                if (typeof res === "string") {
                    res = JSON.parse(res);
                }

                var statusEl = $("#saveStatus");
                if (res.success) {
                    statusEl.text("保存成功！").attr("class", "save-status save-success").show();

                    // 更新当前阈值显示
                    params.forEach(function(param) {
                        var newValue = $("#threshold_" + param).val();
                        $("#current_" + param).text(newValue);
                    });

                    setTimeout(function() {
                        statusEl.hide();
                    }, 3000);
                } else {
                    statusEl.text("保存失败：" + res.error).attr("class", "save-status save-fail").show();
                }
            },
            error: function() {
                $("#saveStatus").text("网络错误，请重试").attr("class", "save-status save-fail").show();
            }
        });
    }
</script>
</body>
</html>
